<template>
	<view class="container">
		<!-- 主内容卡片 -->
		<view class="detail-card">
			<!-- 卡片头部 -->
			<view class="card-header">
				<view class="tutoring-tag">{{ studentDetail.teachingMethod }}</view>
			</view>

			<!-- 详情信息列表 -->
			<view class="detail-list">
				<view class="detail-item">
					<text class="detail-label">家教区域</text>
					<text class="detail-value">{{ studentDetail.regionDistrict }}</text>
				</view>

				<view class="detail-item">
					<text class="detail-label">小区街道</text>
					<view class="detail-value-with-icon">
						<text class="detail-value">{{ studentDetail.detailedAddress }}</text>
						<text class="location-icon">📍</text>
					</view>
				</view>

				<view class="detail-item">
					<text class="detail-label">家教科目</text>
					<text class="detail-value">{{ studentDetail.subjectCategory + '-' +studentDetail.subjectCourse}}</text>
				</view>

				<view class="detail-item">
					<text class="detail-label">学员概况</text>
					<text class="detail-value">{{ studentDetail.studentSituation }}</text>
				</view>

				<view class="detail-item">
					<text class="detail-label">教员要求</text>
					<text class="detail-value">{{ studentDetail.teacherRequirements }}</text>
				</view>

				<view class="detail-item">
					<text class="detail-label">家教时间</text>
					<text class="detail-value">{{ studentDetail.classTimeArrangement }}</text>
				</view>

				<view class="detail-item">
					<text class="detail-label">家教薪酬</text>
					<text class="detail-value salary">{{ studentDetail.salary }}</text>
				</view>
			</view>

			<!-- 互动区域 -->
			<view class="interaction-bar">
				<view class="interaction-item" @click="viewCount">
					<text class="interaction-icon">👁</text>
					<text class="interaction-text">{{ studentDetail.viewCount }}</text>
				</view>

				<view class="interaction-item" @click="toggleLike">
					<text class="interaction-icon" :class="{ liked: studentDetail.isLiked }">❤️</text>
					<text class="interaction-text">{{ studentDetail.likeCount }}</text>
				</view>

				<view class="interaction-item share-item" @click="shareRequest">
					<text class="interaction-icon">📤</text>
				</view>
			</view>
		</view>

		<!-- 底部固定按钮 -->
		<view class="bottom-actions">
			<view class="action-buttons">
				<u-button type="primary" :plain="true" text="联系客服" icon="chat" @click="contactService"></u-button>
				<u-button type="primary" text="投递简历" @click="submitResume"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getStudentDetail
	} from '@/utils/mockApi.js';
	import * as api from '@/api/family'
	/**
	 * 学生详情页面
	 * 展示家教需求的详细信息
	 */
	export default {
		name: 'StudentDetailPage',
		data() {
			return {
				studentId: '', // 学生需求ID
				studentDetail: {
					area: '',
					community: '',
					subject: '',
					profile: '',
					requirements: '',
					time: '',
					salary: '',
					tutoringMethod: '',
					viewCount: 0,
					likeCount: 0,
					isLiked: false,
					publishTime: '',
					status: ''
				},
				loading: true
			}
		},
		onLoad(options) {
			// 从路由参数获取学生需求ID
			if (options.id) {
				this.studentId = options.id;
				this.loadStudentDetail(options.id);
			} else {
				// 如果没有ID，使用默认ID
				this.studentId = 1;
				this.loadStudentDetail(1);
			}
			this.read()
		},
		methods: {
			read(){
				api.readOrderlApi(this.studentId).then(res=>{
					console.log(res.data)
				})
			},
			/**
			 * 加载学生需求详情
			 * @param {string} id - 学生需求ID
			 */
			async loadStudentDetail(id) {
				this.loading = true;
				uni.showLoading({
					title: '加载中...',
					mask: true
				});

				try {
					api.getOrderDetailApi(this.studentId).then(res=>{
						uni.hideLoading()
						this.studentDetail = res.data
						
						if(this.studentDetail.status == 0 || this.studentDetail.status == 1 ){
							this.studentDetail.status = "待匹配"
						}
						if(this.studentDetail.status == 2  ){
							this.studentDetail.status = "已匹配"
						}
						if(this.studentDetail.status == 6  ){
							this.studentDetail.status = "已关闭"
						}
						
						if(this.studentDetail.teachingMethod == 1 ){
							this.studentDetail.teachingMethod = "线下"
						}
						if(this.studentDetail.teachingMethod == 2  ){
							this.studentDetail.teachingMethod = "线上"
						}
						if(this.studentDetail.teachingMethod == 3  ){
							this.studentDetail.teachingMethod = "机构授课"
						}
						if(this.studentDetail.teachingMethod == 4  ){
							this.studentDetail.teachingMethod = "混合模式"
						}
						
					})

					uni.hideLoading();

					
				} catch (error) {
					uni.hideLoading();
					console.error('加载学生需求详情失败:', error);
					uni.showModal({
						title: '加载失败',
						content: '网络错误，请检查网络后重试',
						showCancel: false,
						success: () => {
							uni.navigateBack();
						}
					});
				}
			},

			/**
			 * 查看浏览量
			 */
			viewCount() {
				uni.showToast({
					title: `已有${this.studentDetail.viewCount}人查看`,
					icon: 'none',
					duration: 1500
				});
			},

			/**
			 * 切换点赞状态
			 */
			toggleLike() {
				this.studentDetail.isLiked = !this.studentDetail.isLiked;
				if (this.studentDetail.isLiked) {
					this.studentDetail.likeCount++;
					uni.showToast({
						title: '已收藏',
						icon: 'success',
						duration: 1000
					});
				} else {
					this.studentDetail.likeCount--;
					uni.showToast({
						title: '已取消收藏',
						icon: 'none',
						duration: 1000
					});
				}
			},

			/**
			 * 分享需求
			 */
			shareRequest() {
				uni.showActionSheet({
					itemList: ['分享给朋友', '分享到朋友圈', '复制链接'],
					success: (res) => {
						const actions = ['分享给朋友', '分享到朋友圈', '复制链接'];
						uni.showToast({
							title: `已${actions[res.tapIndex]}`,
							icon: 'success',
							duration: 1500
						});
					}
				});
			},

			/**
			 * 联系客服
			 */
			contactService() {
				uni.showModal({
					title: '联系客服',
					content: '是否拨打客服电话？',
					success: (res) => {
						if (res.confirm) {
							uni.showToast({
								title: '正在为您转接客服',
								icon: 'none'
							})
						}
					}
				})
			},

			/**
			 * 投递简历
			 */
			submitResume() {
				uni.showModal({
					title: '投递简历',
					content: '确定要投递简历给这个学生吗？',
					success: (res) => {
						if (res.confirm) {
							api.sendMyInfoApi(this.studentId).then(res=>{
								if(200 == res.code){
									uni.showToast({
										title: '简历投递成功',
										icon: 'success',
										duration: 1500
									});
									setTimeout(() => {
										uni.navigateBack();
									}, 1500);
								}else{
									uni.showToast({
										title: '请重试',
										icon: 'error'
									});
								}
							}).catch(err => {
								console.log(err)
								uni.hideLoading()
								this.$util.Tips({
									title: err
								})
							})
							
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/uni.scss";

	/* 页面容器 */
	.container {
		background: #f8f8f8;
		min-height: 100vh;
		padding: 32rpx;
		padding-bottom: 120rpx;
		/* 为底部按钮留出空间 */
	}

	/* 主内容卡片 */
	.detail-card {
		background: white;
		border-radius: 20rpx;
		padding: 32rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 20rpx;
	}

	/* 卡片头部 */
	.card-header {
		display: flex;
		justify-content: flex-end;
		margin-bottom: 32rpx;
	}

	.tutoring-tag {
		background: #FFB74D;
		color: white;
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		font-weight: 500;
	}

	/* 详情信息列表 */
	.detail-list {
		display: flex;
		flex-direction: column;
		gap: 24rpx;
	}

	.detail-item {
		display: flex;
		align-items: flex-start;
		gap: 20rpx;
		padding: 16rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.detail-item:last-child {
		border-bottom: none;
	}

	.detail-label {
		font-size: 28rpx;
		color: #666;
		width: 160rpx;
		flex-shrink: 0;
		font-weight: 500;
	}

	.detail-value {
		font-size: 28rpx;
		color: #333;
		flex: 1;
		line-height: 1.5;
	}

	.detail-value.salary {
		color: #ff6b35;
		font-weight: bold;
		font-size: 32rpx;
	}

	.detail-value-with-icon {
		display: flex;
		align-items: center;
		gap: 8rpx;
		flex: 1;
	}

	.location-icon {
		font-size: 24rpx;
		color: #FF5722;
	}

	/* 互动区域 */
	.interaction-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 32rpx;
		padding-top: 24rpx;
		border-top: 1rpx solid #f0f0f0;
	}

	.interaction-item {
		display: flex;
		align-items: center;
		gap: 8rpx;
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		background: #f8f8f8;
		transition: all 0.2s ease;
	}

	.interaction-item:active {
		background: #e8e8e8;
	}

	.share-item {
		background: #E3F2FD;
	}

	.interaction-icon {
		font-size: 24rpx;
	}

	.interaction-icon.liked {
		color: #FF5722;
	}

	.interaction-text {
		font-size: 24rpx;
		color: #666;
	}

	// 底部固定按钮
	.bottom-actions {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: white;
		padding: 20rpx;
		border-top: 2rpx solid #f0f0f0;
		z-index: 100;
		margin-top: 20rpx;
	}

	.action-buttons {
		display: flex;
		gap: 20rpx;
	}

	/* 动画效果 */
	.detail-card {
		animation: slideInUp 0.3s ease-out;
	}

	@keyframes slideInUp {
		from {
			opacity: 0;
			transform: translateY(30rpx);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.bottom-actions {
		animation: slideInUp 0.3s ease-out 0.1s both;
	}
</style>